<script setup lang="ts">
import { onMounted } from 'vue'

import KnowledgeCard from './KnowledgeCard.vue'
import { article } from '../composable/home-navs'

defineProps<{
  type: string
}>()

const { articleFinish, articleLoading, knowledgeList, getHomeKnowledge } =
  article()

onMounted(() => {
  getHomeKnowledge()
})

function onLikeArticle(id: string) {
  const index = knowledgeList.value.findIndex((el) => el.id === id)
  knowledgeList.value[index].likeFlag = +!knowledgeList.value[index]
    .likeFlag as 0 | 1
}
</script>

<template>
  <div class="knowledge-list">
    <van-list
      v-model:loading="articleLoading"
      :finished="articleFinish"
      finished-text="没有更多了"
      :offset="0"
      :immediate-check="false"
      @load="() => getHomeKnowledge(false)"
    >
      <van-cell v-for="item in knowledgeList" :key="item.id">
        <knowledge-card
          :item="item"
          @likeArticle="onLikeArticle"
        ></knowledge-card>
      </van-cell>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
